<template>
  <el-table :data="tasks" :span-method="objectSpanMethod">
    <el-table-column width="20" type="index"></el-table-column>
    <el-table-column width="120" property="name" label="任务名称"></el-table-column>
    <el-table-column width="150" property="details" label="详情"></el-table-column>
    <el-table-column property="dataList[0].name"  width="110"  label="附件"></el-table-column>
  </el-table>
<!--  <task-data ref="taskData"></task-data>-->
</template>

<script>
import instanceToken from "@/utlis/tokenIdentify.js";
import TaskData from "@/components/leader/project/TaskData.vue";
export default {
  name: 'TaskList',
  components: {
    TaskData
  },
  data() {
    return {
      dataList:[],
      tasks:this.taskList,
      spanArr:[]
    };
  },
  props:["taskList"],
  created() {

  },
  mounted: function() {
    this.getSpanArr(this.tasks);
  },
  methods: {
    editClick(){
      this.$refs.taskData.show();
    },
    getSpanArr(data) {
      console.log(data);
      // data就是我们从后台拿到的数据
      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].id === data[i - 1].id) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
        console.log(this.spanArr);
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        console.log(`rowspan:${_row} colspan:${_col}`);
        return {
          // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col
        };
      }
    }
  },
}
</script>